import 'package:flutter/material.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../tool/assets.dart';
import 'commont/diaButton.dart';

class NoiseView extends BaseDialog {
  Function(int)? onOk;
  NoiseView({super.key});

  @override
  BaseDialogState createState() => _NoiseView();
}

class _NoiseView extends BaseDialogState<NoiseView> {
  List<int> _list = [-91, -88, -85, -82, -79, -76, -73, -70, -125];
  int _select_index = -1;

  Widget _item(int index) {
    return InkWell(
      onTap: () {
        _select_index = index;
        setState(() {});
      },
      child: Container(
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
            color: _select_index == index ? Color_theme : Colors.white, // 弹窗内部的颜色
            borderRadius: BorderRadius.circular(4.0),
            border: Border.all(color: _select_index == index ? Color_theme : Colors.black, width: 0.5)),
        child: Stack(
          children: [
            Positioned(
              left: 10,
              right: 60,
              top: 0,
              bottom: 0,
              child: Center(
                child: Text(
                  index == _list.length - 1 ? 'Close' : 'Level ${index + 1}',
                  textAlign: TextAlign.center,
                  style: const TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            Positioned(
              top: 3,
              bottom: 3,
              right: 60,
              child: Container(width: 0.5, color: Colors.black),
            ),
            Positioned(
              right: 10,
              top: 0,
              bottom: 0,
              child: Center(
                child: Text(
                  '${_list[index]}dB',
                  textAlign: TextAlign.right,
                  style: const TextStyle(color: Colors.black, fontSize: 12),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget buildContent(BuildContext context) {
    return LayoutBuilder(builder: (BuildContext context, BoxConstraints constrains) {
      return Container(
          height: 300,
          width: constrains.maxWidth,
          child: Stack(
            children: [
              const Positioned(
                left: 0,
                right: 0,
                top: 0,
                height: 49,
                child: Center(
                  child: Text(
                    'Noise',
                    style: TextStyle(fontSize: 16, color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Positioned(
                left: 10,
                right: 10,
                top: 49,
                child: Container(height: 1.5, color: Colors.black),
              ),
              Positioned(
                left: 10,
                right: 10,
                top: 60,
                height: 210,
                child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: 1,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    mainAxisExtent: 30,
                  ),
                  itemCount: _list.length - 1,
                  itemBuilder: (context, index) {
                    return _item(index);
                  },
                ),
              ),
              Positioned(
                  left: (constrains.maxWidth) / 4.0 + 10,
                  right: (constrains.maxWidth) / 4.0 + 10,
                  top: 220,
                  height: 30,
                  child: _item(_list.length - 1)),
              Positioned(
                left: 10,
                right: 10,
                top: 259,
                child: Container(height: 1.5, color: Colors.black),
              ),
              Positioned(
                right: 0,
                top: 260,
                height: 40,
                width: 60,
                child: Diabutton(
                    title: 'OK',
                    onClick: () {
                      Navigator.pop(context);
                      if (widget.onOk != null && _select_index != -1) {
                        widget.onOk!(_select_index == _list.length - 1 ? 0 : _select_index + 1);
                      }
                    }),
              ),
              Positioned(
                right: 60,
                top: 260,
                height: 40,
                width: 70,
                child: Diabutton(
                    title: 'Cancel',
                    onClick: () {
                      Navigator.pop(context);
                    }),
              ),
            ],
          ));
    });
  }
}
